<script setup>
import FontSize from "./font-size.vue";
import LineHeight from "./line-height.vue";
import {onMounted, ref, watch} from "vue";
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()
const props = defineProps({
  eleDef: Object,
  currentItemElCode: String,
  collapsed: Boolean
})

const collapse = ref(false)
const alignSet = ref(['left', 'center', 'right'])
const txt = ref({
  mode: 'custom',
  lineHeight: 1,
  weight: '',
  fontSize: ''
})


onMounted(() => {
  collapse.value = props.collapsed;

  if (props.aligns) {
    if (_.isArray(props.aligns)) {
      alignSet.value = props.aligns;
    } else if (_.isString(props.aligns)) {
      alignSet.value = props.aligns.split(",");
    }
  } else {
    alignSet.value = ['left', 'center', 'right'];
  }
})

const alignLabel = (val) => {
  if (val === "left") {
    return "左";
  } else if (val === "center") {
    return "中";
  } else if (val === "right") {
    return "右";
  } else if (val === "bottom") {
    return "下";
  } else if (val === "top") {
    return "上";
  } else {
    return val;
  }
}

const collapseChange = () => {
  collapse.value = !collapse.value
}

watch(() => txt.value?.mode, (val) => {
  if (val === 'custom') {
    collapse.value = false
  }
})
</script>

<template>
  <div class="ele-prop-item" v-if="modelValue">
    <div style="text-align: center;">
      <el-radio-group v-model="modelValue.fontType" size="mini" class="ele-prop-type">
        <el-radio-button label="default" v-tippy="{ arrow: true }" content="默认">
          <JIcon :icon="DFT_ICONS.initialize" />
        </el-radio-button>
        <el-radio-button label="custom" v-tippy="{ arrow: true }" content="自定义">
          <JIcon :icon="DFT_ICONS.custom" />
        </el-radio-button>
        <el-radio-button label="art" v-tippy="{ arrow: true }" content="艺术字">
          <JIcon :icon="DFT_ICONS.artFont" />
        </el-radio-button>
      </el-radio-group>
    </div>

    <el-form :model="txt" label-width="60px" label-position="top" size="mini" v-if="modelValue">
      <template v-if="modelValue.fontType == 'custom' || modelValue.fontType == 'art'">
        <el-form-item label="颜色" v-if="modelValue.fontType !== 'art'">
          <el-tooltip class="item" effect="dark" content="字体颜色" placement="top">
            <ColorPicker
              v-model="modelValue.color"
              size="small"
              show-alpha
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="颜色组" v-tippy="{ arrow: true }" content="颜色组，多数据情况依次显示颜色/艺术字">
          <ColorListPicker
            v-model="modelValue.colors"
            size="small"
            :show-alpha="true"
          />
        </el-form-item>
        <el-form-item label="大小">
          <FontSize
            v-model="modelValue.fontSize"
            :ele-def="eleDef"
            :current-item-el-code="currentItemElCode"
          />
        </el-form-item>

        <el-form-item label="粗细">
          <el-radio-group v-model="modelValue.fontWeight" size="mini">
            <el-radio-button label="lighter">极细</el-radio-button>
            <el-radio-button label="normal">正常</el-radio-button>
            <el-radio-button label="bolder">粗体</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="对齐">
          <el-radio-group v-model="modelValue.textAlign" size="mini">
            <el-radio-button
              :label="i"
              :key="i"
              v-for="i in alignSet">
              {{ alignLabel(i) }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="行高">
          <LineHeight
            v-model="modelValue.lineHeight"
            :ele-def="eleDef"
            :current-item-el-code="currentItemElCode"
          />
          <!--<el-col :span="8" class="tip-txt"></el-col>-->
        </el-form-item>
      </template>
      <!--<el-form-item label="文字" v-if="isTypeEle(eleDef, 'text')">
          <el-input v-model="istyle.text"></el-input>
      </el-form-item>
      <el-form-item label="图标" v-if="isTypeEle(eleDef, 'icon')">
          <icon-picker v-model="istyle.icon" theme="mini"></icon-picker>
      </el-form-item>-->
    </el-form>
  </div>
</template>
